<template>
    <div class="header">
        <div class="l-content">
            <div class="wenzi_1">
                <h1>网易云音乐</h1>
            </div>
            <div class="kuang">
                <i class="el-icon-arrow-left"></i>
                <i class="el-icon-arrow-right"></i>
            </div>
            <el-input v-model="input" placeholder="请输入内容" id="shuru_1"></el-input>
        </div>
        <div class="r-content">
            <el-dropdown trigger="click" size="mini">
                <span>
                    <img src="../assets/logo.png" class="user">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
    name:'CoomHead',
    data() {
        return {
            input:''
        }
    },
}
</script>
<style lang="less" scoped>
.kuang{
    margin-right: 30px;
    i{
        margin: 0 5px;
    }
}
    .header{
        display: flex;
        width: 100%;
        height: 100%;
    }
    .l-content{
        width: 70%;
        height: 100%;
        display: flex;
        .wenzi_1{
            margin: 0 10px;
            height: 100%;
            color: white;
        }
    }
    .el-input{
        width: 20%;
        margin-left: -10px;
    }
    .r-content{
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .user{
            width: 40px;
            height: 40px;
            margin-top: 20px;
            border-radius: 50%;
        }
    }
</style>